<template>
	<view class="">
		<u-navbar titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="找相似" :autoBack="true">
		</u-navbar>
		<view class="lisBox flexJBC">
			<view class="l">
				<u-image :src="good.image" width="160rpx" height="160rpx"></u-image>
			</view>
			<view class="r " style="display: flex;flex-direction: column;justify-content: space-between; margin-left: 20rpx; flex-grow: 1;height: 100%;flex-direction: column;">
				<view class="t">
					<text >{{good.product_name}}</text>
					<!-- 商品的名称 文字标签 -->
				</view>
				<view class="b flexJBC" style="margin-top: 12rpx;">
					<view class="homeRed fw5 fontS32">
						<text class="fontS24">￥</text> {{good.price}}
					</view>
					<view class="buybtn fontS24 cof" v-show="!good.disable" @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+good.id)">
						立即购买
					</view>
					<view class="buybtn fontS24 co9" v-show="good.disable" style="background: #F5F5F5;">
						已失效
					</view>
				</view>
			</view>
		</view>
		<view class="paddingLR32">
			<list :list="list" type='4' v-if="list.length>0" />
		</view>
	</view>
</template>
<script>
	import List from '@/componentes/list.vue'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				goods_id: 77,
				good: {}
			}
		},
		components: {
			List
		},
		methods: {
			// 获取形似列表
			getlist() {
				this.$my.get('/index/product/similar/list', {
					page: this.page,
					limit: this.limit,
					goods_id: this.goods_id
				}).then(res => {
					if (res.code == 200) {
						this.list = res.data.data
					}
				})
			},
			// 获取商品
			getgood() {
				this.$my.get('/index/product/similar/get_product', {
					page: this.page,
					limit: this.limit,
					goods_id: this.goods_id
				}).then(res => {
					if(res.code==200){
						this.good=res.data
					}
				})
			},
			// 页面初始化
			init() {
				
				this.getlist()
				this.getgood()
			}
		},
		onLoad(option) {
			this.goods_id=option.id
			this.init()
		}

	}
</script>

<style lang="scss" scoped>
	.buybtn {
		// width: 128rpx;
		padding: 0 12rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 24rpx;
		text-align: center;
		background-color: $red;

	}

	.lisBox {
		background-color: #fff;
		height: 200rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
